<template>
    <div class="wrap">
        <!-- 轮播图 -->
        <Lunbo />
        <!-- 购买详情 -->
        <div class="detail-box">
            <h4>小米手机就是好</h4>
            <p><span class="new-price">市场价:￥2300</span><span class="old-price">销售价:￥{{price}}</span></p>
            <p class="number">购买数量:<Number @getData="getNumber" :nub="this.cont"/>
            <!-- 小球 -->
            <!--半场动画 -->
            <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
            >
            <!-- ref="ball" ref在vue中是获取某个dom元素 -->
            <span class="ball" v-if="flag" ref="ball"></span>
            
            </transition>
            </p>
            <p>
                <mt-button type="primary">立即购买</mt-button>
                <mt-button type="danger" @click="onShop">加入购物车</mt-button>
            </p>
        </div>
        <!-- 商品参数 -->
     
     <div class="shop-parameter">
         <h4>商品参数</h4>
         <p>商品货号:1234567890</p>
         <p>库存情况:{{cont}}件</p>
         <p>上架时间:2018-04-01</p>
    </div> 
    <div class="btn-box">
        <mt-button type="primary" size="large" plain @click="onTap(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="onComment(id)">商品评论</mt-button>
        </div> 
    </div>
</template>
<script>
import Lunbo from "../comments/lunbo/lunbo.vue";
import Number from "../comments/number-box/number.vue";
import Mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      cont: 60,
      flag: false, //控制小球的显示和隐藏
      id: this.$route.params.id,
      getCount: 1, //默认数量是1
      price: 2400
    }
  },
  methods: {
    onTap(id) {
      this.$router.push("/home/graphic/" + id);
    },
    onComment(id) {
      this.$router.push("/home/comment/" + id);
    },
    onShop() {
      this.flag = !this.flag;
      //拼接出一个要保存到 store 中的一些数据
      var cars = {
        id: this.id,
        count: this.getCount,
        price: this.price,
        selected: true
      };
      //调用store中的mutations 的方法 来将商品加入购物车
      this.$store.commit("addToCar", cars);
    },
    //开始之前小球的位置 el代表小球这个元素
    beforeEnter(el) {
      //位移的起始点
      el.style.transform = "translate(0,0)";
    },
    // 执行动画之中要做的事情
    enter(el, done) {
      //必须加上这个 el.offserWidth 不然没有动画
      el.offsetWidth;
      //获取小球在页面中的位置
      var ballPostion = this.$refs.ball.getBoundingClientRect();
      // console.log(ballPostion);
      //获取徽标在页面中的位置 通过dom元素 设置id
      var logoPostion = document.getElementById("logo").getBoundingClientRect();
      // console.log(logoPostion);
      //获取差值 X、Y轴的距离 徽章减小球的位置
      //获取X轴的差值
      var xDist = logoPostion.left - ballPostion.left;
      // console.log(xDist);
      //获取Y轴的差值
      var yDist = logoPostion.top - ballPostion.top;
      // console.log(yDist);

      //位移的终点 es6 使用``(windows键盘英文输入法下tab键上面那个键)来定义一个字符串。
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      //过渡的动画
      //cubic-bezier(.4,-0.3,.85,.67) bezier贝塞尔曲线的使用
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,.85,.67)";
      //done()代表的是下面这个afterEnter(el){}的这个函数的引用，意思是没在动画执行
      //之后就让小球消失
      done();
    },
    //执行动画之后
    afterEnter(el) {
      this.flag = !this.flag;
    },
    //父组件定义的方法，子组件来调用这个方法，子组件的数据作为参数传递给这个方法
    getNumber(count) {
      this.getCount = count;
      console.log("父组件拿到的数量值为:" + count);
    }
  },
  components: {
    Lunbo,
    Number
  }
};
</script>
<style scoped>
.wrap {
  margin: 10px;
  margin-bottom: 60px;
}
.mint-button--normal {
  display: inline-block;
  padding: 0 12px;
  font-size: 10px;
  height: 30px;
}
.number {
  display: flex;
  align-items: center;
}
.new-price {
  text-decoration: line-through;
}
.old-price {
  margin-left: 30px;
  color: red;
}
.detail-box {
  background-color: #fff;
  margin-top: 10px;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
}
.shop-parameter {
  background-color: #fff;
  margin-top: 10px;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
}
.btn-box {
  margin-top: 20px;
}
.mint-button--primary.is-plain {
  margin-bottom: 10px;
}
.ball {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 140px;
  z-index: 99;
}
</style>


